@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  /* Premium infrastructure tool theme - clean, professional, high-performance feel */
  --background: 0 0% 100%; /* Pure white for maximum clarity */
  --foreground: 240 6% 10%; /* Deep charcoal for excellent readability */
  --card: 0 0% 99.5%; /* Subtle card elevation */
  --card-foreground: 240 6% 10%;
  --popover: 0 0% 100%;
  --popover-foreground: 240 6% 10%;
   --primary: 207 53% 42%; /* Flint blue matching SVG */
  --primary-foreground: 0 0% 100%;
  --secondary: 0 0% 97%; /* Clean secondary background */
  --secondary-foreground: 240 6% 10%;
  --muted: 0 0% 97%;
  --muted-foreground: 240 4% 46%; /* Professional muted text */
  --accent: 217 91% 98%; /* Subtle blue accent */
  --accent-foreground: 240 6% 10%;
  --destructive: 0 84% 60%; /* Clear error red */
  --destructive-foreground: 0 0% 100%;
  --border: 0 0% 91%; /* Clean, subtle borders */
  --input: 0 0% 100%;
   --ring: 207 53% 42%; /* Focus ring matches primary */
  /* Professional chart colors for data visualization polish */
  --chart-1: 221 83% 53%; /* Primary chart color */
  --chart-2: 210 20% 98%; /* Accent chart */
  --chart-3: 158 64% 52%; /* Teal for data variety */
  --chart-4: 142 71% 45%; /* Green for success metrics */
  --chart-5: 240 4.8% 46.1%; /* Neutral for comparisons */
  --radius: 0.75rem; /* Consistent rounded radius for polish */
  /* Sidebar for consistent navigation */
  --sidebar: 0 0% 98%; /* Light sidebar for navigation */
  --sidebar-foreground: 240 5.9% 10%;
   --sidebar-primary: 207 53% 42%;
  --sidebar-primary-foreground: 0 0% 100%;
  --sidebar-accent: 210 20% 98%;
  --sidebar-accent-foreground: 240 5.9% 10%;
  --sidebar-border: 0 0% 89.8%;
  --sidebar-ring: 221 83% 53%;

  /* Surface hierarchy for layered UI depth without heaviness */
  --elevated-surface: 0 0% 100%;
  --surface-1: 0 0% 99%;
  --surface-2: 0 0% 97%;
  --surface-3: 0 0% 95%;

  /* Subtle shadows for premium lift and depth, optimized for light theme performance */
  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.04);
  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.06), 0 1px 2px -1px rgb(0 0 0 / 0.06);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.08), 0 2px 4px -2px rgb(0 0 0 / 0.08);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.06), 0 4px 6px -4px rgb(0 0 0 / 0.06);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.05), 0 8px 10px -6px rgb(0 0 0 / 0.05);

  /* Fast, snappy transitions for responsive feel */
  --transition-fast: all 0.1s ease-out;
  --transition-colors: color 0.1s ease-out, background-color 0.1s ease-out, border-color 0.1s ease-out;
}

.dark {
  /* Polished dark mode as secondary, maintaining consistency */
  --background: 240 10% 3.9%;
  --foreground: 0 0% 98%;
  --card: 240 10% 3.9%;
  --card-foreground: 0 0% 98%;
  --popover: 240 10% 3.9%;
  --popover-foreground: 0 0% 98%;
   --primary: 207 53% 42%;
  --primary-foreground: 240 10% 3.9%;
  --secondary: 240 3.7% 15.9%;
  --secondary-foreground: 0 0% 98%;
  --muted: 240 3.7% 15.9%;
  --muted-foreground: 240 4.8% 46.1%;
  --accent: 240 3.7% 15.9%;
  --accent-foreground: 240 4.8% 46.1%;
  --destructive: 0 62.8% 30.6%;
  --destructive-foreground: 0 0% 98%;
  --border: 240 3.7% 15.9%;
  --input: 240 3.7% 15.9%;
   --ring: 207 53% 42%;

  --chart-1: 221 83% 53%;
  --chart-2: 210 20% 98%;
  --chart-3: 158 64% 52%;
  --chart-4: 142 71% 45%;
  --chart-5: 240 4.8% 46.1%;

  --sidebar: 222.2 84% 4.9%;
  --sidebar-foreground: 210 40% 98%;
   --sidebar-primary: 207 53% 42%;
  --sidebar-primary-foreground: 222.2 84% 4.9%;
   --sidebar-accent: 207 53% 50%;
  --sidebar-accent-foreground: 222.2 84% 4.9%;
  --sidebar-border: 217.2 32.6% 17.5%;
  --sidebar-ring: 212.7 26.8% 83.9%;

  --elevated-surface: 240 10% 3.9%;
  --surface-1: 240 10% 5.9%;
  --surface-2: 240 10% 7.9%;
  --surface-3: 240 10% 9.9%;

  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.3);
  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.35), 0 1px 2px -1px rgb(0 0 0 / 0.35);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.35), 0 2px 4px -2px rgb(0 0 0 / 0.35);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.3), 0 4px 6px -4px rgb(0 0 0 / 0.3);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.25), 0 8px 10px -6px rgb(0 0 0 / 0.25);
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
    font-feature-settings: "rlig" 1, "calt" 1;
  }

  /* Added responsive utilities and smooth interactions for better UX */
  .xs\:block {
    @media (min-width: 475px) {
      display: block;
    }
  }

  .xs\:hidden {
    @media (min-width: 475px) {
      display: none;
    }
  }
}

@layer utilities {
  /* Custom utilities for enhanced interactions and performance */
  .transition-smooth {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .focus-ring {
    @apply focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2;
  }

  .hover-lift {
    @apply transition-transform duration-200 hover:-translate-y-0.5;
  }

  .text-balance {
    text-wrap: balance;
  }

  .text-pretty {
    text-wrap: pretty;
  }

  /* Fast, snappy hover effects */
  .hover-fast {
    @apply transition-colors duration-100 hover:bg-accent/10;
  }

  /* Clean focus states */
  .focus-clean {
    @apply focus:outline-none focus:ring-2 focus:ring-primary/50 focus:ring-offset-1;
  }

  /* Infrastructure-grade spacing and layout */
  .container-spacing {
    @apply p-6 sm:p-8 lg:p-10;
  }

  .header-spacing {
    @apply space-y-1 mb-6 sm:mb-8;
  }

  .section-spacing {
    @apply space-y-6 sm:space-y-8;
  }

  /* Premium card styling */
  .card-premium {
    @apply bg-card border border-border/60 rounded-xl shadow-sm hover:shadow-md;
  }

  /* Infrastructure tool typography */
  .text-infrastructure {
    @apply font-medium tracking-tight;
  }

  /* Status indicators */
  .status-running {
    @apply bg-green-500 text-white;
  }

  .status-stopped {
    @apply bg-red-500 text-white;
  }

  .status-paused {
    @apply bg-yellow-500 text-white;
  }

  /* Enhanced scrollbar styling for better UX */
  .scrollbar-thin {
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--muted-foreground), 0.3) transparent;
  }

  .scrollbar-thin::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }

  .scrollbar-thin::-webkit-scrollbar-track {
    background: transparent;
  }

  .scrollbar-thin::-webkit-scrollbar-thumb {
    background-color: rgba(var(--muted-foreground), 0.3);
    border-radius: 3px;
  }

  .scrollbar-thin::-webkit-scrollbar-thumb:hover {
    background-color: hsl(var(--muted-foreground) / 0.5);
  }
  
  /* Enhanced shadow utilities */
  .shadow-xs {
    box-shadow: var(--shadow-xs);
  }
  
  .shadow-sm {
    box-shadow: var(--shadow-sm);
  }
  
  .shadow-md {
    box-shadow: var(--shadow-md);
  }
  
  .shadow-lg {
    box-shadow: var(--shadow-lg);
  }
  
  .shadow-xl {
    box-shadow: var(--shadow-xl);
  }
  
  /* Enhanced surface utilities */
  .bg-elevated {
    background-color: var(--elevated-surface);
  }
  
  .bg-surface-1 {
    background-color: var(--surface-1);
  }
  
  .bg-surface-2 {
    background-color: var(--surface-2);
  }
  
  .bg-surface-3 {
    background-color: var(--surface-3);
  }
  
  /* Enhanced transition utilities */
  .transition-default {
    transition: var(--transition-default);
  }
  
  .transition-transform {
    transition: var(--transition-transform);
  }
  
  .transition-opacity {
    transition: var(--transition-opacity);
  }
  
  .transition-colors {
    transition: var(--transition-colors);
  }
  
  /* Enhanced focus states */
  .focus-enhanced {
    @apply focus:outline-none focus:ring-2 focus:ring-primary/30 focus:ring-offset-1;
  }
  
  /* Enhanced hover states */
  .hover-enhanced {
    @apply transition-all duration-200 hover:opacity-90;
  }
  
  /* Subtle border utilities */
  .border-subtle {
    @apply border border-border/70;
  }
  
  .border-strong {
    @apply border border-border;
  }
}
